<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Lab 2 exercise 7</title>
    <link rel="stylesheet" href="wk2ex7.css">
</head>
<body id="example">
    <a name="TOP"></a>
	
    <nav class="page-nav">
        <p>Yang Gao 30454489</p>
    </nav>

    <main class="main-content">
        <p>And this will be the main content block. I have not used another HTML tag beyond the structural semantic elements and some div elements on this page to lay it out. No <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Basics">tables</a>, no transparent images; just <strong>div</strong>s and style commands.</p>
        <p>Notice how this layer looks like a table, but it is positioned above the layer to the left.</p>
    </main>

    <section class="section-primary">
        <p>And yet another layer goes below the main content.</p>
        <p>Notice the tasteful border? Yes, me neither</p>
    </section>

    <div class="div-footer-note">
		<p>I could go on, but I think you see the brilliance of these things.</p>
	</div>

    <div class="div-cyan-double">
    	<p>Make sure you view the of this page to properly understand what's going on here.</p>
	</div>

    <div class="div-orange-right">
        <p>Now, try resizing this window by pulling the corner. The layers will move around as the page sides get closer to them.</p>
    </div>

	<aside class="page-aside">
		<p>with thanks to www.yourhtmlsource.com for providing this code as part of one of their examples. And apologies for "butchering" it!</p>
	</aside>
    
    <header class="page-header">
        <h1>Lab 2 - Exercise 7</h1>
        <p>And here's some words. This text comes last in the code, but appears top of the page.</p>
    </header>
</body>
</html>